<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>侧耳倾听</title>
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
    <style>
        :root {
            --dawn-pink: #ffb7c5;
            --twilight-blue: #2c3e50;
        }

        body {
            margin: 0;
            height: 100vh;
            background: var(--twilight-blue);
            overflow: hidden;
            font-family: 'Ma Shan Zheng', cursive;
        }

        /* 晨曦天空 */
        .dawn-sky {
            position: fixed;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to bottom,
                var(--dawn-pink) 20%,
                #ffd3b6 40%,
                #87CEEB 100%
            );
            opacity: 0.3;
            animation: skyShift 20s infinite alternate;
        }

        /* 城市剪影 */
        .city-silhouette {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 40%;
            background: linear-gradient(
                to top,
                rgba(0,0,0,0.8) 0%,
                transparent 100%
            );
            clip-path: polygon(
                0% 100%, 2% 90%, 5% 95%, 8% 85%, 12% 97%,
                15% 88%, 20% 100%, 30% 92%, 35% 98%, 40% 90%,
                50% 100%, 60% 95%, 65% 97%, 70% 93%, 75% 99%,
                80% 96%, 85% 100%, 90% 94%, 95% 98%, 100% 100%
            );
        }

        /* 动态光斑 */
        .light-spots {
            position: fixed;
            width: 100%;
            height: 100%;
            background: radial-gradient(
                circle at 80% 20%,
                rgba(255,255,255,0.2) 0%,
                transparent 30%
            );
            animation: lightMove 30s infinite linear;
        }

        /* 歌词样式 */
        .lyric-container {
            position: fixed;
            width: 100%;
            top: 45%;
            pointer-events: none;
        }

        .lyric {
            position: absolute;
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 2em;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
            opacity: 0;
            transform: translateY(30px);
            animation: lyricFlow 8s linear forwards;
        }

        @keyframes skyShift {
            0% { opacity: 0.3; }
            50% { opacity: 0.6; }
            100% { opacity: 0.3; }
        }

        @keyframes lightMove {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes lyricFlow {
            0% { opacity: 0; transform: translateY(30px); }
            15% { opacity: 1; transform: translateY(0); }
            85% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(-30px); }
        }
    </style>
</head>
<body>
    <div class="dawn-sky"></div>
    <div class="city-silhouette"></div>
    <div class="light-spots"></div>
    <div class="lyric-container" id="lyricContainer"></div>
    <canvas id="particleCanvas"></canvas>

    <script>
        // 粒子系统
        class ParticleSystem {
            constructor(canvas) {
                this.canvas = canvas;
                this.ctx = canvas.getContext('2d');
                this.particles = [];
                this.resize();
                window.addEventListener('resize', () => this.resize());
                this.init(300);
                this.animate();
            }

            resize() {
                this.canvas.width = window.innerWidth;
                this.canvas.height = window.innerHeight;
            }

            init(count) {
                for(let i=0; i<count; i++) {
                    this.particles.push({
                        x: Math.random() * this.canvas.width,
                        y: Math.random() * this.canvas.height,
                        r: Math.random() * 3,
                        vx: (Math.random() - 0.5) * 0.2,
                        vy: (Math.random() - 0.5) * 0.2,
                        alpha: Math.random() * 0.5 + 0.5
                    });
                }
            }

            draw() {
                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
                
                this.particles.forEach(p => {
                    this.ctx.beginPath();
                    this.ctx.fillStyle = `rgba(255,255,255,${p.alpha})`;
                    this.ctx.arc(p.x, p.y, p.r, 0, Math.PI*2);
                    this.ctx.fill();

                    p.x += p.vx;
                    p.y += p.vy;

                    if(p.x < 0 || p.x > this.canvas.width) p.vx *= -1;
                    if(p.y < 0 || p.y > this.canvas.height) p.vy *= -1;
                });
            }

            animate() {
                this.draw();
                requestAnimationFrame(() => this.animate());
            }
        }

        // 歌词播放系统
        class LyricPlayer {
            constructor() {
                this.lines = [
                    "因为你，我想成为更好的人",
                    "因此发奋努力，只为想要证明",
                    "我足以与你相配",
                    "只要有你，我就会努力",
                    "我很高兴我尽了力，让我比以前更强大"
                ];
                this.container = document.getElementById('lyricContainer');
                this.currentIndex = 0;
                this.isPlaying = false;
            }

            start() {
                if (!this.isPlaying) {
                    this.isPlaying = true;
                    this.playNext();
                }
            }

            playNext() {
                if (this.currentIndex >= this.lines.length) {
                    this.currentIndex = 0; // 循环播放
                }

                const lyric = document.createElement('div');
                lyric.className = 'lyric';
                lyric.textContent = this.lines[this.currentIndex];
                
                // 先添加DOM元素再触发动画
                this.container.appendChild(lyric);
                
                // 动画结束后自动移除
                setTimeout(() => {
                    lyric.remove();
                }, 8000);

                this.currentIndex++;
                
                // 8秒后播放下句（与动画时间一致）
                setTimeout(() => {
                    if (this.isPlaying) {
                        this.playNext();
                    }
                }, 8000);
            }

            stop() {
                this.isPlaying = false;
            }
        }

        // 初始化
        window.onload = () => {
            new ParticleSystem(document.getElementById('particleCanvas'));
            const lyricPlayer = new LyricPlayer();
            
            // 2秒后开始播放歌词
            setTimeout(() => lyricPlayer.start(), 1000);
            
            
        };
    </script>
</body>
</html>